<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .canvas {
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas" width="500" height="500"></canvas>

    <script type="module">
      import initShader from "./utils/initShader.js";
      import vertex from "./shader/15/vertex.glsl?raw";
      import fragment from "./shader/15/fragment.glsl?raw";
      // 获取canvas
      const canvas = document.querySelector(".canvas");
      // 获取webgl上下文
      const gl = canvas.getContext("webgl");
      // 初始化着色器程序对象
      const program = initShader(gl, vertex, fragment);

      /*
       * 顶点数据
       * 数据结构：x, y, z
       [
        // 前面四个点
        -0.5,-0.5,0.5,
        0.5,-0.5,0.5,
        0.5,0.5,0.5,
        -0.5,0.5,0.5,
        // 后面四个点
        -0.5,-0.5,-0.5,
        -0.5,0.5,-0.5,
        0.5,0.5,-0.5,
        0.5,-0.5,-0.5,
        // 上面四个点
        -0.5,0.5,-0.5,
        -0.5,0.5,0.5,
        0.5,0.5,0.5,
        0.5,0.5,-0.5,
        // 下面四个点
        -0.5,-0.5,-0.5,
        0.5,-0.5,-0.5,
        0.5,-0.5,0.5,
        -0.5,-0.5,0.5,
        // 右面四个点
        0.5,-0.5,-0.5,
        0.5,0.5,-0.5,
        0.5,0.5,0.5,
        0.5,-0.5,0.5,
        // 左面四个点
        -0.5,-0.5,-0.5,
        -0.5,-0.5,0.5,
        -0.5,0.5,0.5,
        -0.5,0.5,-0.5,
       ]
       */
      const vertices = new Float32Array([
        // 前面四个点
        -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
        // 后面四个点
        -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5,
        // 上面四个点
        -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
        // 下面四个点
        -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5,
        // 右面四个点
        0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5,
        // 左面四个点
        -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5,
      ]);
      const buffer = gl.createBuffer();

      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      const aPositionIndex = gl.getAttribLocation(program, "aPosition");
      gl.vertexAttribPointer(
        aPositionIndex,
        3,
        gl.FLOAT,
        false,
        3 * Float32Array.BYTES_PER_ELEMENT,
        0,
      );
      gl.enableVertexAttribArray(aPositionIndex);

      const indices = new Uint16Array([
        0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18,
        16, 18, 19, 20, 21, 22, 20, 22, 23,
      ]);
      const indexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

      const faceColors = [
        [1.0, 0.0, 0.0, 1.0], // 前面颜色
        [0.0, 1.0, 0.0, 1.0], // 后面颜色
        [0.0, 0.0, 1.0, 1.0], // 上面颜色
        [1.0, 1.0, 0.0, 1.0], // 下面颜色
        [1.0, 0.0, 1.0, 1.0], // 右面颜色
        [0.0, 1.0, 1.0, 1.0], // 左面颜色
      ];

      const uColorIndex = gl.getUniformLocation(program, "uColor");
      gl.enable(gl.DEPTH_TEST);

      // 初始角度
      let deg = 30;
      // 传递变换矩阵
      const u_x_matrixIndex = gl.getUniformLocation(program, "u_x_matrix");
      const u_y_matrixIndex = gl.getUniformLocation(program, "u_y_matrix");

      const render = () => {
        /*
            float radian=radians(uRadian);
            float s=sin(radian);
            float c=cos(radian);
            // 绕X轴旋转
            mat4 mx=mat4(1,0,0,0,0,c,-s,0,0,s,c,0,0,0,0,1);
            // 绕Y轴旋转
            mat4 my=mat4(c,0,-s,0,0,1,0,0,s,0,c,0,0,0,0,1);

            2PI=360
            PI=180
            弧度 = 角度 * (PI / 180)
        */
        deg += 1.0;
        const c = Math.cos(deg * (Math.PI / 180));
        const s = Math.sin(deg * (Math.PI / 180));
        gl.uniformMatrix4fv(
          u_x_matrixIndex,
          false,
          new Float32Array([1, 0, 0, 0, 0, c, -s, 0, 0, s, c, 0, 0, 0, 0, 1]),
        );
        gl.uniformMatrix4fv(
          u_y_matrixIndex,
          false,
          new Float32Array([c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1]),
        );
        for (let i = 0; i < 6; i++) {
          // 传递每个面的颜色参数
          gl.uniform4fv(uColorIndex, faceColors[i]);
          // 依次绘制正方形的每个面
          gl.drawElements(
            gl.TRIANGLES,
            6,
            gl.UNSIGNED_SHORT,
            i * 6 * Uint16Array.BYTES_PER_ELEMENT,
          );
        }
        window.requestAnimationFrame(render);
      };
      window.requestAnimationFrame(render);
    </script>
  </body>
</html>
